<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  UserFilled,
  Location,List,TrendCharts,HomeFilled,
  Setting,Flag,DataAnalysis,SuitcaseLine
} from '@element-plus/icons-vue'
import { useAdminStore } from '@/store/admin';
import { onMounted } from "vue";
import router from "@/router/index.js";
import { ElMessage } from "element-plus";
import Cookies from 'js-cookie';

/**
 * 在组件挂载的时候右上角显示用户名
 * @type {Ref<UnwrapRef<boolean>, UnwrapRef<boolean> | boolean>}
 */
const adminStore = useAdminStore()
const role = adminStore.admin ? adminStore.admin.role : 5
const userName = ref('')
onMounted(() => {
  userName.value = adminStore.admin.userName
})

const isCollapse = ref(false)
const menuWidth = ref(200)
const handleOpen = (key: string, keyPath: string[]) => {
  menuWidth.value = 200
}
const handleClose = (key: string, keyPath: string[]) => {
  menuWidth.value = 64
}

/**
 * 退出登录
 */
const logOut = () => {
  //通过js-cookie删除token
  Cookies.remove('adminToken')
  //删除pinia数据
  adminStore.setAdmin('')
  //跳转路由
  router.push('/login')
  ElMessage.info('退出登录成功')
}

/**
 * 进入个人主页
 */
const toPerson = () => {
  router.push('person')
}
</script>

<template>
    <!-- 顶部 -->
    <el-container>
      <el-header class="header" style="background-color: gray;width: 100%;height: 50px;">
        <el-radio-group class="open-close" v-model="isCollapse">
          <el-radio-button @click="handleOpen" :value="false">展开</el-radio-button>
          <el-radio-button @click="handleClose" :value="true">收缩</el-radio-button>
        </el-radio-group>
        <span style="margin-left: 40%;font-size: 40px;font-weight: 700;display: inline-block">
          <img src="../../public/acmIcon.icon" style="width: 40px;border-radius: 30%" alt="acm图标">
          ACM管理系统
        </span>
        <span style="display: inline-block;margin-right: 80px;text-align: right;float: right">
          <el-menu background-color="#545c64"
                   style="height: 50px;z-index: 100"
                   text-color="#fff">
            <el-sub-menu index="1">
                <template #title>
                  <span>{{userName}}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="toPerson" index="1-1">个人主页</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item @click="logOut" index="1-2">退出登录</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
          </el-menu>
        </span>
      </el-header>
      <!-- 菜单 -->
      <el-container>
        <el-aside class="menu-transition menu"
          :style="{ backgroundColor: 'lightgray', width: menuWidth + 'px',
        height: 'calc(100vh - 50px)'}">
          <el-menu background-color="#545c64"
                   text-color="#fff"
                   active-text-color="#ffd04b"
                   default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse">
            <router-link to="/home">
              <el-menu-item index="1">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <template #title>主页</template>
              </el-menu-item>
            </router-link>

            <el-sub-menu index="2" v-if="role===1 || role===2 || role===3">
              <template #title>
                <el-icon>
                  <UserFilled />
                </el-icon>
                <span>人员管理</span>
              </template>
              <el-menu-item-group>
                <!-- <template #title><span>Group One</span></template> -->
                <router-link to="/memberEnter">
                  <el-menu-item index="2-1">队员信息录入</el-menu-item>
                </router-link>
                <router-link to="/teacherAccount"  v-if="role===1 || role===2">
                  <el-menu-item index="2-2">管理人员录入</el-menu-item>
                </router-link>
                <router-link to="/teacher">
                  <el-menu-item index="2-3" v-if="role===1 || role===2">指导老师管理</el-menu-item>
                </router-link>
<!--                <router-link to="/trainLog">-->
<!--                  <el-menu-item index="2-2">训练成绩记录</el-menu-item>-->
<!--                </router-link>-->
<!--                <el-menu-item index="2-3">比赛成绩记录</el-menu-item>-->
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <icon-menu />
                </el-icon>
                <span>训练情况</span>
              </template>
              <el-menu-item-group>
                <router-link to="/title">
                  <el-menu-item index="4-1" v-if="role===1 || role===2 || role===3">题目管理</el-menu-item>
                </router-link>
                <router-link to="/train">
                  <el-menu-item index="4-2" v-if="role===1 || role===2 || role===3">训练管理</el-menu-item>
                </router-link>
                <router-link to="/train-record">
                  <el-menu-item index="4-3" v-if="role===1 || role===2 || role===3">训练记录管理</el-menu-item>
                </router-link>
                <!-- <router-link to="/train-rank">
                  <el-menu-item index="4-4" v-if="role===1 || role===2 || role===3">训练排名管理</el-menu-item>
                </router-link> -->
              </el-menu-item-group>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <Flag />
                </el-icon>
                <span>比赛管理</span>
              </template>
              <el-menu-item-group>
                <router-link to="/apply">
                  <el-menu-item index="5-1" v-if="role===1 || role===2 || role===3">报名信息管理</el-menu-item>
                </router-link>
                <router-link to="/match">
                  <el-menu-item index="5-2">比赛信息管理</el-menu-item>
                </router-link>
                <router-link to="/award">
                  <el-menu-item index="5-3" v-if="role===1 || role===2 || role===3">获奖结果管理</el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-sub-menu>


            <router-link to="/certificate">
              <el-menu-item index="6"  v-if="role===1 || role===2 || role===3">
                <el-icon>
                  <List />
                </el-icon>
                <template #title>证书管理</template>
              </el-menu-item>
            </router-link>

            <router-link to="/news">
              <el-menu-item index="7" v-if="role===1 || role===2 || role===3">
                <el-icon>
                  <DataAnalysis />
                </el-icon>
                <template #title>新闻管理</template>
              </el-menu-item>
            </router-link>

            <router-link to="/job">
              <el-menu-item index="8" v-if="role===1 || role===2">
                <el-icon>
                  <SuitcaseLine />
                </el-icon>
                <template #title>职场管理</template>
              </el-menu-item>
            </router-link>

          </el-menu>
        </el-aside>
        <!-- 主体 -->
        <el-main style="width: 100%;height: calc(100vh - 50px)">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

</template>

<style scoped>
.menu-transition {
  transition: width 0.3s ease;
}

/* 关闭菜单栏下划线 */
a[href] {
  text-decoration: none;
}
.open-close{
  position: fixed;
}
.menu{
  background: linear-gradient(to right, #12323d, #102810);
}
.header{
  background: linear-gradient(to right, #18353d, #dfffdf);
}
</style>
